<% @body_id = 'product-details' %>

<div class="container">
  <%= spree_breadcrumbs(@taxon, '', @product) %>
</div>

<% cache cache_key_for_product do %>
  <div class="container pt-4 product-details">
    <div class="row" data-hook="product_show">
      <%= render partial: 'gallery' %>
      <div class="col-12 col-md-5" data-hook="product_right_part">
        <div id="product-description" data-hook="product_right_part_wrap">
          <h1 class="mt-3 mt-md-0 text-center text-md-left product-details-title">
            <%= @product.name %>
          </h1>
          <div id="cart-form" data-hook="cart_form">
            <%= render 'cart_form', variant_change_identifier: 'productCarousel' %>
          </div>
        </div>
      </div>
    </div>
    <div class="pb-4 pt-md-5 row" data-hook="product_description">
      <div class="col-12 col-md-7 col-lg-6">
        <%= render partial: 'description' %>
      </div>
      <div class="d-none d-lg-block col-lg-1"></div>
      <div class="col-12 col-md-5" data-hook="product_properties">
        <%= render partial: 'properties' %>
      </div>
      <div class="col-12" data-hook="promotions">
        <%= render partial: 'promotions' %>
      </div>
    </div>

    <div id="no-product-available" class="no-product-available-dropdown">
      <%= render partial: 'spree/shared/no_product_available' %>
    </div>

    <%= render partial: 'gallery_modal' %>
  </div>
  <div id="related-products" />

  <%= products_structured_data([@product]) %>

  <%= render 'spree/shared/product_added_modal' %>
<% end %>

<div
  data-related-products
  data-related-products-id="<%= @product.slug %>"
  data-related-products-enabled="<%= @product.respond_to?(:has_related_products?) %>"
/>
